import Patch from './patch.mdx'
import UniappCliStyle from './UniappCliStyle.mdx'

# uni-app cli vue3 vite

## 1. 安装

```bash npm2yarn
npm install -D tailwindcss @tailwindcss/postcss weapp-tailwindcss
```

<Patch />

## 2. 配置 `vite.config.ts`

```ts title="vite.config.ts"
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'
import path from 'node:path'

export default defineConfig({
  plugins: [
    uni(),
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      cssEntries: [
        // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
        path.resolve(import.meta.dirname, './src/app.css'),
      ],
    }),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
});

```

> tailwindcss@4 必须配置 `cssEntries` 并且使用绝对路径，否则 `tailwindcss` 生成的类名不会参与转译。

## 3. 添加样式

<UniappCliStyle/>

接着直接运行 `npm run dev:mp-weixin`，

微信开发者工具导入这个项目，即可看到效果

{/* :::warning
这里必须创建一个额外的 `css` 文件，而不是直接在 `App.vue` 里的 `style` 标签下直接写，

这是因为 `@tailwindcss/vite` 目前只转化 `.css` 文件。后续可能会支持更多格式的文件，比如 `vue` 编译的中间文件

详见 http://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-vite/src/index.ts#L122 中的 `isCssFile` 判断
::: */}



## 参考模板

[uni-app-tailwindcss-v4](https://github.com/icebreaker-template/uni-app-tailwindcss-v4) 
